<template>
	<div :style="[{
		position : positionValue,
		zIndex : zIndexValue,
		top : $addUnit(topValue),
		left : $addUnit(leftValue),
		bottom : $addUnit(bottomValue),
		right : $addUnit(rightValue),

		display : display,
		flexDirection : flexDirection,
		flexWrap : flexWrap,
		alignItems : alignItems,
		justifyContent : justifyContent,
		
		borderRadius : $addUnit(borderRadiusValue),
		
		border : border,
		
		background : background,
		
		width:$addUnit(widthValue),
		
		height:$addUnit(heightValue),
		
		margin : marginValue,
		padding: paddingValue,
	
		color:colorValue,

		whiteSpace:whiteSpace,

		},customStyle,selectStyle,defaultStyle]" @tap="tap" :class="cxclass" v-if="vif">
		<slot>
			<!-- 内容 -->
		</slot>
		{{nameValue}}
	</div>
</template>

<script>
	/**
	 * cxView 根目录
	 * @description 所有的view的根目录
	 * @property {String} background transparent rgba(0, 0, 0, 0) 透明色
	 * @property {String} border 2rpx solid #005EF4 
	 * @property {String} position static,fixed,relative,absolute,sticky
	 * @property {String} display inline默认，none隐藏，hidden占位隐藏，inline-block行内块元素，block块级元素， 
	 * @property {String} flexDirection  flex-direction: row | row-reverse | column | column-reverse;row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。
	 * @property {String} alignItems tretch 默认拉伸以适应容器，center中心，flex-start,flex-end,baseline,initial,inherit
	 *  
	 * @property {String} justifyContent  flex-start | flex-end | center | space-between | space-around 
	 * @property {String} font  可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family" 
	 * @property {String} fontWeight  定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
	 * @property {String} textDecoration  划线,underline	定义文本下的一条线。overline	定义文本上的一条线。line-through	定义穿过文本下的一条线。inherit	规定应该从父元素继承 text-decoration 属性的值。underline overline wavy blue;
	 * @property {Boolean} isSelect  选中状态
	 * @property {String} selectBgColor  选中时的背景色
	 * @property {String} selectColor  选中时的字体颜色]
	 * @property {Boolean} isAverage  是否均分,isAverage,averageCount均分数量 ,averageInterval均分时的间隔,averageCorrection 修正值,aspectRatio,
	 * @property {String} aspectRatio  在均分时,根据宽高比来显示高度,此数据=高/宽,此属性可以用来计算高度,数据为1的时候,显示为方形,大小1,高大于宽
	 * @property {Boolean} showCircula  两侧显示圆角
	 * @property {String} throttleTime  节流，一定时间内只能触发一次点击事件
	 * @property {Boolean} disabled  是否允许点击,不允许点击时背景色默认为#999,disabledBg
	 * @property {String} disabledBg  不允许点击时,背景色默认为#999
	 * @property {String} boxSizing  content-box|border-box|inherit:
	 */
	export default {
		name: "cxView",
		data() {
			return {
				nameValue: '',
				positionValue: "",
				zIndexValue: "10",
				topValue: "",
				leftValue: "",
				bottomValue: "",
				rightValue: "",
				displayValue: "",
				flexDirectionValue: "",
				alignItemsValue: "",
				justifyContentValue: "",

				borderRadiusValue: "",
				borderValue: "",


				paddingValue: "",
				paddingTopValue: "",
				paddingLeftValue: "",
				paddingBottomValue: "",
				paddingRightValue: "",
				orderValue: "",


				colorValue: "",
				fontSizeValue: "",
				fontValue: "",
				fontWeightValue: "",
				fontStyleValue: "",
				fontFamilyValue: "",
				textAlignValue: '',



				backgroundValue: "",
				widthValue: "",
				heightValue: "",

				marginValue: "",
				marginLeftValue: "",
				marginRightValue: "",
				marginTopValue: "",
				marginBottomValue: "",

				isSelectValue: false,
				selectBgColorValue: '',
				selectColorValue: '',
				selectBorderValue: '',

				tagValue: 0,
				vif: true,
			}
		},
		methods: {
			tap() {
				let param = this.getParam()

				if (!this.disabled) {
					return;
				}
				if (parseInt(this.throttleTime) === 0) {

					// 此时不进行节流
					this.$emit('confirm', param, res => {
						this.isSelectValue = res.isSelect;
					});

				} else {
					/**
					 * 使用节流后,在组件内,最底层的view点击事件会失效,原因不明
					 */
					// 进行节流控制，每this.throttle毫秒内，只在开始处执行

					this.$u.throttle(() => {
						this.vif = false;
						this.vif = true;
						this.$emit('confirm', param, res => {
							this.isSelectValue = res.isSelect;
						});

					}, this.throttleTime);
				}

			},
			getParam() {
				let param = {};
				param.isSelect = this.isSelectValue;
				param.tag = this.tagValue;
				param.disabled = this.disabled;

				return param
			}
		},

		computed: {
			defaultStyle() {
				let style = {};

				if (!uni.$cx.checkString(this.borderTop)) {
					style.borderTop = this.borderTop;
				}
				if (!uni.$cx.checkString(this.borderRight)) {
					style.borderRight = this.borderRight;
				}
				if (!uni.$cx.checkString(this.borderBottom)) {
					style.borderBottom = this.borderBottom;
				}
				if (!uni.$cx.checkString(this.borderLeft)) {
					style.borderLeft = this.borderLeft;
				}



				if (!uni.$cx.checkString(this.textAlignValue)) {
					style.textAlign = this.textAlignValue;
				}

				if (!uni.$cx.checkString(this.fontValue)) {
					style.font = this.fontValue;
				}

				if (!uni.$cx.checkString(this.fontStyleValue)) {
					style.fontStyle = this.fontStyleValue;
				}

				if (!uni.$cx.checkString(this.fontFamilyValue)) {
					style.fontFamily = this.fontFamilyValue;
				}

				if (!uni.$cx.checkString(this.fontWeightValue)) {
					style.fontWeight = this.fontWeightValue;
				}

				if (!uni.$cx.checkString(this.fontSizeValue)) {
					style.fontSize = this.$addUnit(this.fontSizeValue);
				}



				if (!uni.$cx.checkString(this.textDecoration)) {
					style.textDecoration = this.textDecoration;
					style.overflow = 'visible';
				}
				if (!uni.$cx.checkString(this.boxSizing)) {
					style.boxSizing = this.boxSizing;
				}

				// margin
				if (this.marginTopValue != '_') {
					style.marginTop = this.$addUnit(this.marginTopValue);
				}
				if (this.marginBottomValue != '_') {
					style.marginBottom = this.$addUnit(this.marginBottomValue);
				}
				if (this.marginLeftValue != '_') {
					style.marginLeft = this.$addUnit(this.marginLeftValue);
				}
				if (this.marginRightValue != '_') {
					style.marginRight = this.$addUnit(this.marginRightValue);
				}
				// padding
				if (parseInt(this.paddingTopValue) >= 0) {
					style.paddingTop = this.$addUnit(this.paddingTopValue);
				}
				if (parseInt(this.paddingBottomValue) >= 0) {
					style.paddingBottom = this.$addUnit(this.paddingBottomValue);
				}
				if (parseInt(this.paddingLeftValue) >= 0) {
					style.paddingLeft = this.$addUnit(this.paddingLeftValue);
				}
				if (parseInt(this.paddingRightValue) >= 0) {
					style.paddingRight = this.$addUnit(this.paddingRightValue);
				}
				if (!uni.$cx.checkString(this.orderValue)) {
					style.order = this.orderValue;
				}
				return style;
			},



		},

		watch: {
			name: {
				handler(newObj) {
					this.nameValue = newObj;
				},
				immediate: true
			},

			color: {
				handler(newObj) {
					this.colorValue = newObj
					if (uni.$cx.isEmptyObject(this.selectColorValue)) {
						this.selectColorValue = newObj;
					}
					if (this.isSelectValue) {
						this.colorValue = this.selectColorValue;
					} else {
						this.colorValue = newObj;
					}
				},
				immediate: true
			},
			size: {
				handler(newObj) {
					this.fontSizeValue = newObj;
				},
				immediate: true
			},
			borderRadius: {
				handler(newObj) {
					this.borderRadiusValue = newObj;
					if (this.showCircula) {
						this.borderRadiusValue = "50vh";

					}
				},
				immediate: true
			},
			width: {
				handler(newObj) {
					this.widthValue = newObj;
				},
				immediate: true
			},
			height: {
				handler(newObj) {
					this.heightValue = newObj;
				},
				immediate: true
			},
			background: {
				handler(newObj) {
					this.backgroundValue = newObj;
				},
				immediate: true
			},
			position: {
				handler(newObj) {
					this.positionValue = newObj;
				},
				immediate: true
			},
			zIndex: {
				handler(newObj) {
					this.zIndexValue = newObj;
				},
				immediate: true
			},
			top: {
				handler(newObj) {
					this.topValue = newObj;
				},
				immediate: true
			},
			left: {
				handler(newObj) {
					this.leftValue = newObj;
				},
				immediate: true
			},
			bottom: {
				handler(newObj) {
					this.bottomValue = newObj;
				},
				immediate: true
			},
			right: {
				handler(newObj) {
					this.rightValue = newObj;
				},
				immediate: true
			},

		},

		mounted() {
			this.nameValue = this.name;

			this.positionValue = this.position;

			this.rightValue = this.right;
			this.bottomValue = this.bottom;
			this.leftValue = this.left;


			this.displayValue = this.display;
			this.flexDirectionValue = this.flexDirection;
			this.flexWrapValue = this.flexWrap;
			this.alignItemsValue = this.alignItems;
			this.justifyContentValue = this.justifyContent;


			this.borderRadiusValue = this.borderRadius;

			if (this.showCircula) {
				this.borderRadiusValue = "50vh";
			}


			this.widthValue = this.width;
			this.heightValue = this.height;

			this.marginValue = this.margin;
			this.marginLeftValue = this.marginLeft;
			this.marginTopValue = this.marginTop;
			this.marginRightValue = this.marginRight;
			this.marginBottomValue = this.marginBottom;

			this.paddingValue = this.padding;
			this.paddingTopValue = this.paddingTop;
			this.paddingLeftValue = this.paddingLeft;
			this.paddingBottomValue = this.paddingBottom;
			this.paddingRightValue = this.paddingRight;
			this.orderValue = this.order;

			this.colorValue = this.color;
			this.fontSizeValue = this.size;
			this.fontValue = this.font;
			this.fontWeightValue = this.fontWeight;
			this.fontStyleValue = this.fontStyle;
			this.fontFamilyValue = this.fontFamily;
			this.textAlignValue = this.textAlign;

			/**
			 * 自定义属性
			 */
			this.isSelectValue = this.isSelect;
			this.selectBgColorValue = this.selectBgColor;
			this.selectColorValue = this.selectColor;
			this.selectBorderValue = this.selectBorder;

		},
		props: {
			/**
			 * https://www.runoob.com/w3cnote/flex-grammar.html
			 */

			/**
			 * 位置属性
			 */
			/**
			 * Position(定位)
			 * static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
			 * fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
			 * relative  相对定位元素的定位是相对其正常位置。
			 * absolute  绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
			 * sticky   icky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
			 * 
			 * 
			 */
			position: {
				type: String,
				default: ''
			},
			zIndex: {
				type: [String, Number],
				default: "10"
			},
			top: {
				type: [String, Number],
				default: '_'
			},
			left: {
				type: [String, Number],
				default: '_'
			},
			right: {
				type: [String, Number],
				default: '_'
			},
			bottom: {
				type: [String, Number],
				default: "_"
			},
			/**
			 * box-sizing: content-box|border-box|inherit:
			 */
			boxSizing: {
				type: [String, null],
				default: ''
			},



			margin: {
				type: [String, null],
				default: ''
			},
			marginTop: {
				type: [String, Number],
				default: '_'
			},
			marginLeft: {
				type: [String, Number],
				default: '_'
			},
			marginBottom: {
				type: [String, Number],
				default: '_'
			},
			marginRight: {
				type: [String, Number],
				default: '_'
			},
			width: {
				type: [String, Number],
				default: ''
			},
			height: {
				type: [String, Number],
				default: ''
			},



			/**
			 * 样式
			 */
			/*边框属性允许你指定一个元素边框的样式和颜色。
			2rpx solid #005EF4
			
			
			*/
			border: {
				type: [String, null],
				default: ''
			},


			/**
			 * 圆角
			 */
			borderRadius: {
				type: [String, Number],
				default: '12'
			},


			/**
			 * border
			 */
			borderTop: {
				type: [String, null],
				default: ''
			},
			borderRight: {
				type: [String, null],
				default: ''
			},
			borderBottom: {
				type: [String, null],
				default: ''
			},
			borderLeft: {
				type: [String, null],
				default: ''
			},


			/**
			 * flex
			 * 
			 */

			//默认为flex
			//inline默认，none隐藏，hidden占位隐藏，inline-block行内块元素，block块级元素，
			display: {
				type: String,
				default: ''
			},

			/**
			 * flex-direction属性决定主轴的方向（即项目的排列方向）。
			 *  flex-direction: row | row-reverse | column | column-reverse;
			 * row（默认值）：主轴为水平方向，起点在左端。
			 * row-reverse：主轴为水平方向，起点在右端。
			 * column：主轴为垂直方向，起点在上沿。
			 * column-reverse：主轴为垂直方向，起点在下沿。
			 */
			flexDirection: {
				type: String,
				default: 'row'
			},
			/**
			 * 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
			 *  flex-wrap: nowrap | wrap | wrap-reverse;
			 * 它可能取三个值。
			 *	(1）nowrap（默认）：不换行。
			 * （2）wrap：换行，第一行在上方。
			 * （3）wrap-reverse：换行，第一行在下方。
			 */
			flexWrap: {
				type: String,
				default: ''
			},

			//stretch 默认拉伸以适应容器，center中心，flex-start,flex-end,baseline,initial,inherit
			/**
			 * align-items属性定义项目在交叉轴上如何对齐。
			 * align-items: flex-start | flex-end | center | baseline | stretch;
			 * flex-start：交叉轴的起点对齐。
			 * flex-end：交叉轴的终点对齐。
			 * center：交叉轴的中点对齐。
			 * baseline: 项目的第一行文字的基线对齐。
			 * stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
			 * 
			 */
			alignItems: {
				type: String,
				default: ''
			},

			/**
			 * align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
			 * align-content: flex-start | flex-end | center | space-between | space-around | stretch;
			 * flex-start：与交叉轴的起点对齐
			 * flex-end：与交叉轴的终点对齐。
			 * center：与交叉轴的中点对齐。
			 * space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
			 * space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
			 * stretch（默认值）：轴线占满整个交叉轴。
			 * 
			 */
			alignContent: {
				type: String,
				default: ''
			},


			//space-beween,space-around,flex-end,flex-start,left
			/**
			 * justify-content属性定义了项目在主轴上的对齐方式。
			 *  justify-content: flex-start | flex-end | center | space-between | space-around;
			 * flex-start（默认值）：左对齐
			 * flex-end：右对齐
			 * center： 居中
			 * space-between：两端对齐，项目之间的间隔都相等。
			 * space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
			 * 
			 */
			justifyContent: {
				type: String,
				default: ''
			},
			//    
			/**
			 * 默认值visible默认值。内容不会被修剪，会呈现在元素框之外,
			 * hidden  内容会被修剪，并且其余内容是不可见的。
			 * scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
			 * auto		如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
			 * inherit(继承)	规定应该从父元素继承 overflow 属性的值。
			 * 
			 */
			overflow: {
				type: String,
				default: 'hidden'
			},


			/**
			 * 项目属性开始
			 */
			/**
			 * 属性设置在项目上。
			 * order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
			 * https://www.runoob.com/wp-content/uploads/2015/07/59e399c72daafcfcc20ede36bf32f266.png
			 */
			order: {
				type: [String, Number],
				default: ''
			},
			/**
			 * flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
			 *  flex-grow: <number>;  default 0 
			 * 
			 * 直接设置在styel内不能正常使用,把此项设置为class,用此属性显示是否激活
			 * 原type: [String,Number],
				default:''
				
			 */
			// flexGrow: {
			// 	type: [String, Number],
			// 	default: ''
			// },

			/**
			 * flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
			 *   flex-shrink: <number>; 
			 * https://www.runoob.com/wp-content/uploads/2015/07/240d3e960043a729bb3ff5e34987904f.jpg
			 */
			// flexShrink:{
			// 	type: [String,Number],
			// 	default:''
			// },

			//占比
			/**
			 * flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
			 *  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
			 */
			flex: {
				type: String,
				default: ''
			},


			/**
			 * 项目属性结束
			 */


			/**
			 * 内容样式属性
			 */


			padding: {
				type: [String, null],
				default: ''
			},
			paddingTop: {
				type: [String, Number, null],
				default: ''
			},
			paddingLeft: {
				type: [String, Number, null],
				default: ''
			},
			paddingBottom: {
				type: [String, Number, null],
				default: ''
			},
			paddingRight: {
				type: [String, Number, null],
				default: ''
			},



			//旋转，none matrix(n,n,n,n,n,n),translate(x,y),translate3d(x,y,z),translateX(x),translateY(y),translateZ(z),scale(x,y),scale3d(x,y,z),scaleX(x),scaleY(y),scaleZ(z),rotate(angle),rotate3d(x,y,z,angle),rotateX(angle),rotateY(angle),rotateZ(z),skew(x-angle,y-angle),perspective(n)
			transform: {
				type: [String, null],
				default: ''
			},

			background: {
				type: [String, null],
				default: ''
			},

			customStyle: {
				type: [Object, null],
				default () {
					return {}
				}
			},
			selectStyle: {
				type: [Object, null],
				default () {
					return {}
				}
			},


			/**
			 * 修改所有元素或其父元素的属性为初始值
			 * initial|inherit|unset;
			 * initial	修改所有元素属性或父元素的值为其初始化值
			 * inherit	修改所有元素属性或父元素的值为其父元素的值
			 * unset	修改所有元素属性或父元素的值为其父元素的值(如果有继承)或其初始值
			 */
			all: {
				type: String,
				default: ''
			},


			/**
			 * 文字效果
			 */

			/**
			 * 用来控制字体大小
			 */
			size: {
				type: [String, Number],
				default: ''
			},
			/**
			 * 字体颜色
			 */
			color: {
				type: [String, null],
				default: ''
			},
			/**
			 * font
			 * 指定在一个声明的所有字体属性：
			 * font:15px arial,sans-serif;
			 * font:italic bold 12px/30px Georgia, serif;
			 * 可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
			 */
			font: {
				type: [String, null],
				default: ''
			},

			/**
			 * fontWeight
			 * normal	默认值。定义标准的字符。
			 * bold	定义粗体字符。
			 * bolder	定义更粗的字符。
			 * lighter	定义更细的字符。
			 * 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
			 * inherit	规定应该从父元素继承字体的粗细。
			 * 
			 */
			fontWeight: {
				type: [String, null],
				default: ''
			},
			/**
			 * fontStyle
			 * vnormal	默认值。浏览器显示一个标准的字体样式。
				italic	浏览器会显示一个斜体的字体样式。
				oblique	浏览器会显示一个倾斜的字体样式。
					inherit	规定应该从父元素继承字体样式。
			 * 
			 * 
			 */
			fontStyle: {
				type: [String, null],
				default: ''
			},
			/**
			 * 段落的字体
			 * ont - family属性指定一个元素的字体。
			 * font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

有两种类型的字体系列名称：
			family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
			generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。
			 */
			fontFamily: {
				type: [String, null],
				default: ''
			},


			/**
			 * normal
			 * nowrap|当CSS的空白属性设置为nowrap时，两个或多个white-spaces的每个序列将显示为单个空白。除非明确指定，否则元素中的内容不会换行。
			 * pre|此值使空格与HTML中的<pre>标签具有相同的效果。仅当使用换行符指定时，元素中的内容才会换行
			 * pre-line|当CSS的空白属性设置为行前值时，两个或多个white-spaces的每个序列将显示为单个空白。元素中的内容将在需要时以及在明确指定时进行包装。
			 * pre-wrap|当CSS的空白属性设置为前行值时，white-spaces的每个序列都将按原样显示。元素中的内容将在需要时以及在明确指定时进行包装。
			 * initial|此值将空白属性设置为默认值
			 * inherit;此值将空白属性设置为父元素的值
			 */
			whiteSpace: {
				type: [String, null],
				default: ''
			},

			/**
			 * clip	--剪切文本。
			 * ellipsis	----显示省略符号 ... 来代表被修剪的文本。
			 * string	--使用给定的字符串来代表被修剪的文本。
			 * initial	---设置为属性默认值
			 * inherit	---从父元素继承该属性值
			 */
			textOverflow: {
				type: [String, null],
				default: ''
			},

			textAlign: {
				type: [String, null],
				default: ''
			},

			/**
			 * 划线
			 * none,
			 * underline	定义文本下的一条线。
			 * overline	定义文本上的一条线。
			 * line-through	定义穿过文本下的一条线。
			 * blink	定义闪烁的文本。
			 * inherit	规定应该从父元素继承 text-decoration 属性的值。
			 * underline overline dotted red;
			 * underline overline wavy blue;
			 */
			textDecoration: {
				type: [String, null],
				default: ''
			},


			/**
			 * 选中状态
			 */
			isSelect: {
				type: Boolean,
				default: false
			},
			/**
			 * 选中时背景色
			 */
			selectBgColor: {
				type: [String, null],
				default: ''
			},
			/**
			 * 选中时文字颜色
			 */
			selectColor: {
				type: [String, null],
				default: ''
			},


			/**
			 * 选中时 border
			 */
			selectBorder: {
				type: [String, null],
				default: ''
			},

			/**
			 * 此处只用于多列列表时使用,
			 * 均分属性
			 * 是否均分,
			 */
			isAverage: {
				type: Boolean,
				default: false
			},
			averageCount: {
				type: [String, Number, null],
				default: "1"
			},
			/**
			 * 均分时的间隔
			 */
			averageInterval: {
				type: [String, Number, null],
				default: "1"
			},
			/**
			 * correction 修正值
			 * 用来去除左右的margin
			 */
			averageCorrection: {
				type: [String, Number, null],
				default: "1"
			},
			/**
			 * 在均分时,根据宽高比来显示高度,
			 * 此数据=高/宽
			 * 此属性可以用来计算高度,
			 * 数据为1的时候,显示为方形,
			 * 大小1,高大于宽
			 */
			aspectRatio: {
				type: [String, Number, null],
				default: ""
			},


			// 两侧显示圆角
			showCircula: {
				type: Boolean,
				default: false
			},


			// 节流，一定时间内只能触发一次,点击事件
			throttleTime: {
				type: [String, Number],
				default: 0
			},

			cxclass: {
				type: [String, null],
				default: ''
			},
			/**
			 * 是否允许点击
			 */
			disabled: {
				type: Boolean,
				default: true
			},
			/**
			 * 不允许点击时,背景色,默认为#999
			 */
			disabledBg: {
				type: String,
				default: '#999'
			},
			tag: {
				type: [String, Number],
				default: '0'
			},
			name: {
				type: String,
				default: ''
			},




		},
		created() {

		},
	}
</script>

<style lang="scss" scoped>
	.allow {
		pointer-events: none;
	}
</style>